import React, { useEffect, useState } from "react";
import { Image, Modal } from "antd";
import axios from "axios";
import { BASEURL, SERVERURL } from "@/pages/api/config";

const PicsPage: React.FC = () => {
  let [picsList, setPicsList] = useState<string[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const clickHandler = (imageSrc: string) => {
    console.log(`select ${imageSrc}`);
    axios.get("/api/send", {
      params: {
        imageSrc: imageSrc,
      },
    });
  };

  useEffect(() => {
    const getPicsListHandler = async (): Promise<any> => {
      let res = await axios.get("/api/files");
      setPicsList(res.data.filenameList);
    };
    getPicsListHandler();
  }, []);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <Modal
        title="确认上传吗？"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>请选择...</p>
      </Modal>
      <h2>当前服务器地址: {SERVERURL}</h2>
      {picsList.map((imageSrc) => {
        return (
          /*          <Image
                                                                                  src={imageSrc}
                                                                                  width={200}
                                                                                  height={200}
                                                                                  alt={imageSrc}
                                                                                  key={imageSrc}
                                                                                ></Image>*/
          <p
            key={imageSrc}
            onClick={() => {
              showModal();
              clickHandler(imageSrc);
            }}
          >{`${BASEURL}${imageSrc}`}</p>
        );
      })}
    </>
  );
};

export default PicsPage;
